import { useState } from "react";
import { useNavigate, useLocation, useSearchParams } from "react-router-dom";
import { NavBar, Popup, Button, Toast } from "antd-mobile";
import { ProductCard } from "react-vant";
import styles from "./index.module.scss";
import http from "../../utils/http";

const Index = () => {
  const navigate = useNavigate();
  const { state } = useLocation();
  const [visible1, setVisible1] = useState(false);

  //支付
  const handelPay = async () => {
    const res = await http.get("/api/pay", {
      params: {
        title: "订单支付",
        id: state.id,
        price: state.seatprice,
      },
    });
    const { code, data } = res.data;
    if (code === 200) location.href = data;

    //查询订单状态：是否成功
    const OrderTimer = setInterval(async () => {
      const res2 = await http.get("/api/query", { params: { id: state.id } });
      const { code, message } = res2.data;
      if (code === 200) {
        Toast.show(message);
        clearInterval(OrderTimer);
        navigate("/success");
      } else {
        Toast.show(message);
        clearInterval(OrderTimer);
      }
    }, 3000);
  };

  return (
    <div>
      <NavBar onBack={() => navigate("/selseat")}>订单确认</NavBar>
      <div>
        <ProductCard
          num={state.seatcount}
          price={state.seatprice}
          desc={state.title}
          title={state.title}
          thumb={state.image}
        />
      </div>
      <div className={styles.d_btn} onClick={() => setVisible1(true)}>
        立即预定
      </div>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
        bodyStyle={{ height: "40vh" }}
      >
        <div className={styles.btns}>
          <Button
            block
            color="primary"
            size="large"
            shape="rounded"
            onClick={() => handelPay()}
          >
            支付宝
          </Button>
          <Button block color="success" size="large" shape="rounded">
            微信
          </Button>
          <Button block color="danger" size="large" shape="rounded">
            云闪付
          </Button>
        </div>
      </Popup>
    </div>
  );
};

export default Index;
